import Wrapper from './style.ts'
import qrcode from "@/static/imgs/courseContent/二维码 (3).svg";
import {Button, Dropdown, MenuProps, Modal} from "antd";
import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {changeArchive, changeTop} from "@/api/teacher/courseApi.ts";
import {VerticalAlignTopOutlined} from "@ant-design/icons";

const ClassCard = ({
                       courseId, academicYear, semester, name, teachClass, code, userName, bg, isTop,
                       isArchived,
                       initCourse
                   }: any) => {
    console.log(isArchived)
    const [background, setBackground] = useState('')

    const navigate = useNavigate()

    useEffect(() => {
        setBackground(bg)
    }, [])

    const [isArchivedModelOpen, setIsArchivedModelOpen] = useState(false);
    const handleIsArchivedModelOpen = () => {
        setIsArchivedModelOpen(true);
    }

    const handleCancel = () => {
        setIsArchivedModelOpen(false);
    }

    const handleArchiveAll = () => {
    }
    const handleArchiveMyself = () => {
        changeArchive(courseId).then(() => {
            initCourse()
        })
    }

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    停用
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    重置
                </a>
            ),
        },
    ];

    const items1: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    结课
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    删除
                </a>
            ),
        },
        {
            key: '3',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    编辑
                </a>
            ),
        },
        {
            key: '4',
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={handleIsArchivedModelOpen}>
                    归档管理
                </a>
            ),
        },
        {
            key: '5',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    复制成新课程
                </a>
            ),
        },
        {
            key: '6',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    复制到已有课程
                </a>
            ),
        },
        {
            key: '7',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    打包下载
                </a>
            ),
        },
        {
            key: '8',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    复制到教研室
                </a>
            ),
        }, {
            key: '9',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    转让
                </a>
            ),
        },
    ];

    const headerStyle = {
        cursor: 'pointer',
        padding: '18px 24px',
        height: '152px',
        color: 'rgb(255, 255, 255)',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: "50% center",
        backgroundImage: `url(${background})`,
        backgroundColor: 'rgb(51, 103, 213)',
    }


    return (
        <Wrapper>
            <Modal title="要归档此课程吗" open={isArchivedModelOpen}
                   footer={[
                       <Button key="back" onClick={handleCancel}>
                           取消
                       </Button>,
                       <Button key="submit" type="default" onClick={handleArchiveAll}>
                           归档全部
                       </Button>,
                       <Button
                           type="primary"
                           onClick={handleArchiveMyself}
                       >
                           归档自己
                       </Button>,
                   ]}
            >
                <p> 您可以在 <a>“课程 - 归档管理”</a> 中查看此课程 </p>
                <p><a>【归档全部】</a>学生的课程也会一起被归档 </p>
                <p><a>【归档自己】</a>学生的课程不会被归档 </p>
            </Modal>
            <div className="card">
                <div className="header-info" style={headerStyle} onClick={() => {
                    navigate("/teacherCourseContent/" + courseId)
                }}>
                    <p className="time">{academicYear} {semester}</p>
                    <h3 className="name">{name}</h3>
                    <p className="classname">{teachClass}</p>
                    <div className="qrcode">
                        <img src={qrcode} alt=""/>
                        <div className="dropdown">
                            <Dropdown menu={{items}} placement="bottom" arrow trigger={['click']}>
                                <div>加课码:{code}</div>
                            </Dropdown>
                        </div>
                    </div>
                </div>
                <div className="content-info"></div>
                <div className="user-info">
                    <div className="left">
                        <span>负责人: </span>
                        <span>{userName}</span>
                    </div>
                    <div className="right">
                        <div onClick={() => {
                            changeTop(courseId).then(() => {
                                initCourse()
                            })
                        }}>{isTop ? '取消置顶' :
                            <div style={{color: 'skyblue'}}><VerticalAlignTopOutlined/>置顶课程</div>}</div>
                        <Dropdown menu={{
                            items: items1
                        }} placement="topCenter" arrow trigger={['click']}>
                            <div className='more'>...</div>
                        </Dropdown>
                    </div>
                </div>
            </div>
        </Wrapper>
    );

}
export default ClassCard;